<template>
    <div class="el-header">
        <!-- <el-avatar :src="require('@/assets/logo.png')"></el-avatar> -->
        <el-avatar :src="Avatar"></el-avatar>
        <el-dropdown>
            <span class="el-dropdown-link">
                {{ Username }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>头像管理</el-dropdown-item>
                <el-dropdown-item>好友管理</el-dropdown-item>
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item @click.native="ExitLogin">退出登入</el-dropdown-item>
                <el-dropdown-item @click.native="csconfig">测试拦截器</el-dropdown-item>
            </el-dropdown-menu>
        </el-dropdown>
    </div>
</template>

<script>
    const axios = require("axios");


    import {
        lanjieqi
    } from '@/api/user'

    import {
        clearToken,
        getUserInfo,
        clearUserInfo
    } from '@/utils/auth'



    export default {
        name: 'IndexRule',
        components: {},
        data() {
            return {
                Avatar: "",
                Username: ""
            }
        },
        methods: {
            //退出登入，清除本地token缓存 
            ExitLogin() {
                clearToken()
                clearUserInfo()
                this.$router.push('/login')
            },
            //测试请求拦截器
            csconfig() {
                lanjieqi();
            }
        },
        //立即执行获取背景图片
        created: function() {
            //万一已经登入并在手动刷新地址栏那就会找不到username和avatarId，因为不是由登入页面传来的，
            //有两种方法可以解决：1.把这两个货缓存在本地。2.利用getToken判断是否已经登入
            //这里我用第二种，因为变动代码量最少,但是不行，因为头像刷新不缺请求就不会出来

            //立即获取登入的用户信息--从以前由登入传过来变成本地获取了
            // console.log(JSON.parse(getUserInfo()).username);
            var userinfo = JSON.parse(getUserInfo());
            this.Username = userinfo.username //this.$route.query.username
                //立即执行获取头像
            axios.request({
                url: `http://localhost:5193/File/dolowdfile?Id=${userinfo.avatarId}`, //${this.$route.query.avatarId}
                responseType: 'blob', //这里最重要,不要去掉
                method: 'get' //请求方式,看后台的需求,可能是get,post等方式
            }).then(res => {
                let blob = new Blob([res.data], {
                    type: "image/jpg"
                });
                let url = window.URL.createObjectURL(blob);
                this.Avatar = url;
            })
        }
    }
</script>


<style>
    .el-avatar {
        margin-right: 5px;
    }
    
    .el-header {
        background-color: #b3c0d1;
        color: #333;
        font-weight: bolder;
        font-family: Verdana, Geneva, Tahoma, sans-serif;
        text-align: center;
        line-height: 60px;
        /* 新增属性，使其偏右及居中 */
        display: flex;
        justify-content: right;
        align-items: center;
    }
    
    .el-dropdown-link {
        cursor: pointer;
    }
    
    .el-icon-arrow-down {
        font-size: 12px;
    }
</style>